<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>决策分析</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  		<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="css/Contrast.css">
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script type="text/javascript" src="js/echarts.js" ></script>
	</head>
	<body>
		 <div class="dashboard">
		    <div class="flex-container column">
		        <div class="item one" data-type="1" style="transform: translate(-22.4%,-33.5%) scale(0.33)">
		          <!--<multipleColumn></multipleColumn>-->
		          <div id="column" style="width: 100%;height:100%;"></div>
		        </div>
		        <div class="item two" data-type="2" style="transform: translate(-22.4%,0.5%) scale(0.33)">
		          <!--<column></column>-->
		          <div id="point" style="width: 100%;height:100%;"></div>
		        </div>
		        <div class="item three" data-type="3" style="transform: translate(-22.4%,34.5%) scale(0.33)">
		          <!--<v-line></v-line>-->
		          <div id="line" style="width: 100%;height:100%;"></div>
		        </div>
		        <div class="item four active" data-type="4" style="transform: translate(43.7%, 0) scale(1)">
		          <!--<point></point>-->
		          <div id="main" style="width: 100%;height:100%;"></div>
		        </div>
		    </div>
		  </div>
	</body>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<script>
		var items=[];
		$('.item').click(function(){
			  let clickIndex=$(this).attr('data-type');
			  let activeItem = document.querySelector('.flex-container .active')
		      let activeIndex = activeItem.dataset.order
		      let clickItem = items[clickIndex - 1]
		      if (activeIndex === clickIndex) {
		        return
		      }
		      activeItem.classList.remove('active')
		      clickItem.classList.add('active')
		      _setStyle(clickItem, activeItem)
		});
		function _setStyle(el1, el2) {
	      let transform1 = el1.style.transform
	      let transform2 = el2.style.transform
	      el1.style.transform = transform2
	      el2.style.transform = transform1
	    };
	    
	    function  _init() {
	     	items = document.querySelectorAll('.flex-container .item')
	      for (let i = 0; i < items.length; i++) {
	       items[i].dataset.order = i + 1;
	      }
	    };
	    _init();
	</script>
	<script>
		//初始化
	var lineChart = echarts.init(document.getElementById('line'));
	//参数设置
	option = {
	      title: {
	        show: false
	      },
	      tooltip: {
	        trigger: 'axis'
	      },
	      legend: {
	        show: false
	      },
	      toolbox: {
	        show: false
	      },
//	      color: '#fff',
	      calculable: true,
	      xAxis: [{
	        name: '产品',
	        type: 'category',
	        axisLine: {
	          show: false
	        },
	        axisTick: {
	          show: false
	        },
	        nameTextStyle: {
	          color: 'rgba(255, 255, 255, 0.69)'
	        },
	        axisLabel: {
	          textStyle: {
	            color: 'white'
	          }
	        },
	        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
	      }],
	      yAxis: [{
	        axisLine: {
	          show: false
	        },
	        nameLocation: 'end',
	        nameGap: 20,
	        nameRotate: 0,
	        axisTick: {
	          show: false
	        },
	        splitLine: {
	          lineStyle: {
	            color: ['rgba(230, 230, 230, 0.2)']
	          }
	        },
	        axisLabel: {
	          textStyle: {
	            color: 'white',
	            fontSize: 14
	          }
	        },
	        name: '数量',
	        type: 'value',
	        nameTextStyle: {
	          color: 'rgba(255, 255, 255, 0.69)'
	        }
	      }],
	      series: [{
	        name: '标签1',
	        type: 'line',
	        stack: '总量',
	        data: [120, 132, 101, 134, 90, 230, 210]
	      }, {
	        name: '标签2',
	        type: 'line',
	        stack: '总量',
	        data: [220, 182, 191, 234, 290, 330, 310]
	      }, {
	        name: '标签3',
	        type: 'line',
	        stack: '总量',
	        data: [150, 232, 201, 154, 190, 330, 410]
	      }, {
	        name: '标签4',
	        type: 'line',
	        stack: '总量',
	        data: [320, 332, 301, 334, 390, 330, 320]
	      }, {
	        name: '标签5',
	        type: 'line',
	        stack: '总量',
	        data: [820, 932, 901, 934, 1290, 1330, 1320]
	      }]
	    };
    lineChart.setOption(option);   //参数设置方法   

	</script>
	<script>
		//初始化
	var columnChart = echarts.init(document.getElementById('column'));
	//参数设置
	option = {
      title: {
        show: false
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        show: false
      },
      toolbox: {
        show: false
      },
//    color: this.color,
      calculable: true,
      xAxis: [{
        name: '产品',
        type: 'category',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        nameTextStyle: {
          color: 'rgba(255, 255, 255, 0.69)'
        },
        axisLabel: {
          textStyle: {
            color: 'white'
          }
        },
        data: ['产品1', '产品2']
      }],
      yAxis: [{
        axisLine: {
          show: false
        },
        nameLocation: 'end',
        nameGap: 20,
        nameRotate: 0,
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: ['rgba(230, 230, 230, 0.2)']
          }
        },
        axisLabel: {
          textStyle: {
            color: 'white',
            fontSize: 14
          }
        },
        name: '数量',
        type: 'value',
        nameTextStyle: {
          color: 'rgba(255, 255, 255, 0.69)'
        }
      }],
      series: [{
        name: '标签1',
        type: 'bar',
        data: [2.0, 4.9],
        barWidth: 16,
        barGap: 0
      }, {
        name: '标签2',
        type: 'bar',
        data: [2.6, 5.9],
        barWidth: 16,
        barGap: 0
      }, {
        name: '标签3',
        type: 'bar',
        data: [2.0, 6.4],
        barWidth: 16,
        barGap: 0
      }, {
        name: '标签4',
        type: 'bar',
        data: [4.0, 5.9],
        barWidth: 16,
        barGap: 0
      }, {
        name: '标签5',
        type: 'bar',
        data: [5.6, 4.9],
        barWidth: 16,
        barGap: 0
      }, {
        name: '标签6',
        type: 'bar',
        data: [2.0, 3.4],
        barWidth: 16,
        barGap: 0
      }]
    };
    columnChart.setOption(option);   //参数设置方法   

	</script>
	<script>
		//初始化
	var pointChart = echarts.init(document.getElementById('point'));
	//参数设置
	option = {
		    tooltip: {
		        trigger: 'item',
		        formatter: "{a} <br/>{b}: {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
		    },
		    series: [
		        {
		            name:'访问来源',
		            type:'pie',
		            selectedMode: 'single',
		            radius: [0, '30%'],
		
		            label: {
		                normal: {
		                    position: 'inner'
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:335, name:'直达', selected:true},
		                {value:679, name:'营销广告'},
		                {value:1548, name:'搜索引擎'}
		            ]
		        },
		        {
		            name:'访问来源',
		            type:'pie',
		            radius: ['40%', '55%'],
		            label: {
		                normal: {
		                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
		                    backgroundColor: '#eee',
		                    borderColor: '#aaa',
		                    borderWidth: 1,
		                    borderRadius: 4,
		                    // shadowBlur:3,
		                    // shadowOffsetX: 2,
		                    // shadowOffsetY: 2,
		                    // shadowColor: '#999',
		                    // padding: [0, 7],
		                    rich: {
		                        a: {
		                            color: '#999',
		                            lineHeight: 22,
		                            align: 'center'
		                        },
		                        // abg: {
		                        //     backgroundColor: '#333',
		                        //     width: '100%',
		                        //     align: 'right',
		                        //     height: 22,
		                        //     borderRadius: [4, 4, 0, 0]
		                        // },
		                        hr: {
		                            borderColor: '#aaa',
		                            width: '100%',
		                            borderWidth: 0.5,
		                            height: 0
		                        },
		                        b: {
		                            fontSize: 16,
		                            lineHeight: 33
		                        },
		                        per: {
		                            color: '#eee',
		                            backgroundColor: '#334455',
		                            padding: [2, 4],
		                            borderRadius: 2
		                        }
		                    }
		                }
		            },
		            data:[
		                {value:335, name:'直达'},
		                {value:310, name:'邮件营销'},
		                {value:234, name:'联盟广告'},
		                {value:135, name:'视频广告'},
		                {value:1048, name:'百度'},
		                {value:251, name:'谷歌'},
		                {value:147, name:'必应'},
		                {value:102, name:'其他'}
		            ]
		        }
		    ]
		};
    pointChart.setOption(option);   //参数设置方法   

	</script>
	<script>
		var myChart = echarts.init(document.getElementById('main'));
		var category = [];
		var dottedBase = +new Date();
		var lineData = [];
		var barData = [];
		
		for (var i = 0; i < 20; i++) {
		    var date = new Date(dottedBase += 3600 * 24 * 1000);
		    category.push([
		        date.getFullYear(),
		        date.getMonth() + 1,
		        date.getDate()
		    ].join('-'));
		    var b = Math.random() * 200;
		    var d = Math.random() * 200;
		    barData.push(b)
		    lineData.push(d + b);
		}
		
		
		// option
		option = {
//		    backgroundColor: '#0f375f',
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'shadow'
		        }
		    },
		    legend: {
		        data: ['line', 'bar'],
		        textStyle: {
		            color: '#ccc'
		        }
		    },
		    xAxis: {
		        data: category,
		        axisLine: {
		            lineStyle: {
		                color: '#ccc'
		            }
		        }
		    },
		    yAxis: {
		        splitLine: {show: false},
		        axisLine: {
		            lineStyle: {
		                color: '#ccc'
		            }
		        }
		    },
		    series: [{
		        name: 'line',
		        type: 'line',
		        smooth: true,
		        showAllSymbol: true,
		        symbol: 'emptyCircle',
		        symbolSize: 15,
		        data: lineData
		    }, {
		        name: 'bar',
		        type: 'bar',
		        barWidth: 10,
		        itemStyle: {
		            normal: {
		                barBorderRadius: 5,
		                color: new echarts.graphic.LinearGradient(
		                    0, 0, 0, 1,
		                    [
		                        {offset: 0, color: '#14c8d4'},
		                        {offset: 1, color: '#43eec6'}
		                    ]
		                )
		            }
		        },
		        data: barData
		    }, {
		        name: 'line',
		        type: 'bar',
		        barGap: '-100%',
		        barWidth: 10,
		        itemStyle: {
		            normal: {
		                color: new echarts.graphic.LinearGradient(
		                    0, 0, 0, 1,
		                    [
		                        {offset: 0, color: 'rgba(20,200,212,0.5)'},
		                        {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
		                        {offset: 1, color: 'rgba(20,200,212,0)'}
		                    ]
		                )
		            }
		        },
		        z: -12,
		        data: lineData
		    }, {
		        name: 'dotted',
		        type: 'pictorialBar',
		        symbol: 'rect',
		        itemStyle: {
		            normal: {
		                color: '#0f375f'
		            }
		        },
		        symbolRepeat: true,
		        symbolSize: [12, 4],
		        symbolMargin: 1,
		        z: -10,
		        data: lineData
		    }]
		};
		myChart.setOption(option);   //参数设置方法   
	</script>
</html>
